<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>商品详情页</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_mx77ygssb8en4s4i.css"/>
		<link rel="stylesheet" type="text/css" href="swiper/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="css/xxMall.css"/>
		<link rel="stylesheet" type="text/css" href="css/members.css"/>
	</head>
	<style>
		.swiper-container {
		    width: 100%;
		} 
		.swiper-pagination{
			background: rgba(0,0,0,0.4);
			color: white;
			width: auto;
			left: 50%;
			transform: translateX(-50%);
			padding: 0 1rem;
			border-radius: 10px;
		}
	</style>
	<body>
		<!--
        	作者：
        	时间：2017-10-11
        	描述：轮播图
        -->
		<div class="swiper-container">
		    <div class="swiper-wrapper" id="bannerSlide">
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		</div>
		
		<div id="goodsDetail">
			
		</div>
		
		
		
		<footer class="footerBox">
			<a href="#">
				<i class="iconfont icon-kefu"></i>
				<span>客服</span>
			</a>
			<a class="footer-collected">
				<i class="iconfont icon-heart"></i>
				<span>收藏</span>
			</a>
			<a href="cartOrderlist.html" class="proBuy">
				<button>去支付</button>
			</a>
		</footer>
		<div class="" id="footerHeight"></div>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="swiper/swiper-3.4.2.min.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src="js/network.js"></script>
		<script src="js/configUrl.js"></script>
		<script src="js/ltPublic.js"></script>
		<script src="pageJs/productDetail.js"></script>
		<script id="bannerTmpl" type="text/x-jquery-tmpl">
			<div class="swiper-slide" id="${id}"><img src="${picUrl}" width="100%"/></div>
		</script>
		<script id="goodsDetailTmpl" type="text/x-jquery-tmpl">
			<div class="proTitle mb10">
				<p>${name}</p>
				<div class="goodFlex mt5">
				<div class="protitCon goodCell">
					<p><span>&yen;${(activityPrice).toFixed(2)}</span><em>&yen;${(price).toFixed(2)}</em></p>
				</div>
				<em><i class="iconfont icon-heart"></i>收藏</em>
				</div>
				<!--<div class="absProcon">
					专业服务更可靠
					<i></i>
				</div>-->
			</div>
			<div class="specBox mb10">
				{{each categorys}}
				<p class="category-name">${categoryName}</p>
				<ul class="specList mb10">
					{{each properties}}
					<li class="" id="${id}">${propertyName}<em></em></li>
					{{/each}}
				</ul>
				{{/each}}
				<div class="specNum">
					<input type="button" name="" id="" value="-" class="minusIpt" />
					<input type="number" name="" id="" value="1" class="numIpt" />
					<input type="button" name="" id="" value="+" class="addIpt" />
				</div>
			</div>
			
			<ul class="discussTab">
				<li class="active">商品详情</li>
				<li>评价</li>
			</ul>
			<div class="proPingjia"><!--商品评价-->
			
			<div class="discussbox proDetailcon"><!--商品详情-->
				{{each introductionPics}}
				<img src="${picUrl}" width="100%" id="${id}"/>
				{{/each}}
			</div>
			<div class="discussbox discussCon dn">
				<p class="discussP goodFlex">
					<span class="goodCell">评价 (${commentCount })</span>
					好评度<i>${praiseRate}%</i> <em class="font-right-family">&gt;</em>
				</p>
				<div id="discussList">
					
				</div>
				
				<div class="moreDisscuss">
					<a href="discussList.html?goodsId=${id}">查看全部评论</a>
				</div>
			</div>
			</div>
		</script>
		<script id="discussTmpl" type="text/x-jquery-tmpl">
			<div class="discussDiv">
				<div class="discussUser goodFlex">
					<span class="goodCell userImg">
						{{if imageUrl}}
						<img src="${imageUrl}"/>
						{{else}}
						<img src="images/userIcon.png"/>
						{{/if}}
						${member.name}
					</span>
					<span class="discussStar">
						{{each $item.starNum()}}
						<img src="images/star-icon.png" width="16"/>
						{{/each}}
					</span>
				</div>
				<p class="goodTit">
					${goods.name}
					Iphone7 plus
					机身颜色：红色特别版
					128G
					官方标配
				</p>
				<p class="discussTxt">
					${comment}
				</p>
				<ul class="discussPhoto">
					{{if imgUrls}}
					{{each imgUrls}}
					<li><img src="${imgUrls}"/></li>
					{{/each}}
					{{else}}
					<li><img src="images/defaultImg.png"/></li>
					{{/if}}
				</ul>
			</div>
		</script>
	</body>
</html>
